<template>
	<view class="wrap">
		<view class="name row j-center">
			<view class="">
				站点名称：
			</view>
			<view class="">
				{{name}}
			</view>
		</view>
		<view class="top row j-sa">
			<view class="topItem row flex-column a-center" @click="send(0,1)">
				<view class="itemIcon row j-center a-center">
					<image style="width: 20rpx; height: 22rpx;" src="../../static/index/sanjiao.png" mode=""></image>
				</view>
				<view class="itemText" :class="{active: activeText === '启用'}">
					启用
				</view>
			</view>
			<view class="topItem row flex-column a-center" @click="send(0,0)">
				<view class="itemIcon row j-center a-center"
					style="background: linear-gradient(180deg, #F55959 0%, rgba(251,0,0,0) 100%);">
					<view class="jinyong" />
				</view>
				<view class="itemText" :class="{active: activeText === '禁用'}">
					禁用
				</view>
			</view>
			<view class="topItem row flex-column a-center" @click="send(2,1)">
				<view class="itemIcon row j-center a-center"
					style="background: linear-gradient(180deg, #707070 0%, rgba(56,56,56,0) 100%);">
					<view class="alltingzhi" />
				</view>
				<view class="itemText" :class="{active: activeText === '一键停止'}">
					一键停止
				</view>
			</view>
		</view>
		<uni-section title="设置巡检" titleFontSize="28rpx" titleColor="#212121">
			<template v-slot:decoration>
				<view class="decoration"></view>
			</template>
			<view class="ctrlWrap row j-sb">
				<view class="ctrlItem" :class="{inspectionActive: curInspectionIndex === index}"
					v-for="(item,index) in inspectionOptions" :key="item.value" @click="inspectionClick(item, index)">
					{{item.label}}
				</view>
			</view>
		</uni-section>
		<uni-section title="紧急启动" titleFontSize="28rpx" titleColor="#212121">
			<template v-slot:decoration>
				<view class="decoration"></view>
			</template>
			<view class="ctrlWrap row j-sb">
				<view class="ctrlItem" :class="{emergencyStartActive: curEmergencyStartIndex === index}"
					v-for="(item, index) in emergencyStartOptions" :key="item.value"
					@click="emergencyStartClick(item, index)">
					{{item.label}}
				</view>
			</view>
		</uni-section>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { request } from '@/utils'
	import { onLoad, onUnload } from '@dcloudio/uni-app'
	import { useStore } from '@/stores/user';
	const user = useStore()
	const sn = ref('')
	const name = ref('')
	onLoad((options) => {
		sn.value = options.sn
		name.value = options.name
	})
	onUnload(() => {
		uni.closeSocket()
	})
	uni.onSocketMessage((res : any) => {
		uni.showToast({
			title: '下发控制指令成功'
		})
	});
	const getInfo = () => {
		user.getMyInfo()
	}
	getInfo()
	const permissions = ref<boolean>(false)
	const getMyPermissions = async () => {
		const res : any = await request('/api/v1/getMyPermissions',{},'GET')
		const stationPermissions = res.data.filter((item:any) => {
			return item.name === '站点管理'
		})
		const isControl = stationPermissions[0].childs[0].childs.filter((item:any) => {
			return item.route === 'stationControl'
		})
		if(isControl.length) {
			permissions.value = true
		} else {
			permissions.value = false
		}
	}
	getMyPermissions()
	uni.connectSocket({
		// url: 'ws://121.40.65.235:9688',
		url: 'wss://zhxfcpxcx.nz-cloud.com/wss',
		complete: () => {
			console.log('complete')
		},
		success: () => {
			console.log('success')
		},
		fail: () => {
			console.log('fail')
		}
	});
	const inspectionOptions = [
		{
			value: '1',
			label: '巡检1区',
		},
		{
			value: '2',
			label: '巡检1-2区',
		},
		{
			value: '3',
			label: '巡检1-3区',
		},
		{
			value: '4',
			label: '巡检1-4区',
		},
		{
			value: '5',
			label: '巡检1-5区',
		},
		{
			value: '6',
			label: '巡检1-6区',
		},
	]
	const emergencyStartOptions = [
		{
			value: 'F1',
			label: '启动1区',
		},
		{
			value: 'F2',
			label: '启动2区',
		},
		{
			value: 'F3',
			label: '启动3区',
		},
		{
			value: 'F4',
			label: '启动4区',
		},
		{
			value: 'F5',
			label: '启动5区',
		},
		{
			value: 'F6',
			label: '启动6区',
		},
	]
	const curInspectionIndex = ref('')
	const curEmergencyStartIndex = ref('')
	const inspectionClick = (item : any, index : any) => {
		// curEmergencyStartIndex.value = ''
		// curInspectionIndex.value = index
		send(1, item.value, index)
	}
	const emergencyStartClick = (item : any, index : any) => {
		// console.log(item);
		// curInspectionIndex.value = ''
		// curEmergencyStartIndex.value = index
		send(3, item.value, index)
	}
	const activeText = ref<String>()
	const send = (action : any, value : any, index:any = null) => {
		if (permissions.value) {
			uni.showModal({
				title: name.value,
				content: `是否确定操作`,
				success: (res) => {
					if (res.confirm) {
						console.log('用户点击确定');
						uni.sendSocketMessage({
							data: JSON.stringify({ "sn": sn.value, "type": "ykyt", "action": action, "value": value, "userId": user.myInfo.id })
						});
						if(action === 0 || action === 2) {
							curInspectionIndex.value = ''
							curEmergencyStartIndex.value = ''
						}
						if(action === 1) {
							activeText.value = ''
							curEmergencyStartIndex.value = ''
							curInspectionIndex.value = index
						}
						if(action === 3) {
							activeText.value = ''
							curInspectionIndex.value = ''
							curEmergencyStartIndex.value = index
						}
						if(action === 0 && value === 1) {
							activeText.value = '启用'
						}
						if(action === 0 && value === 0) {
							activeText.value = '禁用'
						}
						if(action === 2 && value === 1) {
							activeText.value = '一键停止'
						}
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			})
		} else {
			uni.showToast({
				title: '无控制权限',
				icon: 'error'
			})
		}
		
	}
</script>

<style lang="scss" scoped>
	::v-deep .distraction {
		font-weight: bold;
	}

	::v-deep .uni-section {
		background-color: #F6F6F6;
		margin-bottom: 15rpx;
	}

	.wrap {
		padding: 30rpx 24rpx;
		background-color: #F6F6F6;
		padding-bottom: 40rpx;
		min-height: 100vh;

		.decoration {
			width: 12rpx;
			height: 22rpx;
			margin-right: 4px;
			border-radius: 4rpx;
			font-weight: bold;
			background: linear-gradient(180deg, #2986F6 0%, #6FABFC 100%);
		}

		.name {
			margin: 10rpx 0 30rpx 0;
			color: #3665FF;
			font-size: 22rpx;

			&>view {
				border-bottom: 1px solid #3665FF;
				padding-bottom: 10rpx;
			}
		}

		.top {
			margin-bottom: 20rpx;

			.topItem {
				font-size: 22rpx;
				color: #8E8E93;
				font-weight: bold;

				.itemIcon {
					width: 60rpx;
					height: 60rpx;
					background: linear-gradient(180deg, #3665FF 0%, #F5F5F5 100%);
					border-radius: 50%;
					margin-bottom: 24rpx;

					.jinyong {
						width: 28rpx;
						height: 8rpx;
						background-color: #fff;
					}

					.alltingzhi {
						width: 16rpx;
						height: 16rpx;
						background-color: #fff;
					}
				}
				.active {
					color: #3665FF;
				}
			}
		}

		.ctrlWrap {
			background: #fff;
			box-shadow: 0px 3px 6px rgba(191, 191, 191, 0.16);
			border-radius: 16rpx;
			padding: 28rpx 44rpx 0 44rpx;

			.ctrlItem {
				width: 27%;
				margin-bottom: 28rpx;
				text-align: center;
				color: #707070;
				border-radius: 8rpx;
				background-color: #F6F6F6;
				font-size: 24rpx;
				padding: 14rpx 0;
			}

			.inspectionActive {
				background: linear-gradient(180deg, #2986F6 0%, #6FABFC 100%);
				color: #fff;
			}

			.emergencyStartActive {
				background: linear-gradient(180deg, #FEAD08 0%, #F8D07C 100%);
				color: #fff;
			}
		}
	}
</style>